<template>
	<view>
		<tn-popup v-model="show" mode="bottom" :zIndex="99999" :closeBtn="!!1" @close="close">
			<view class="tn-padding">
				<view class="tn-text-center">
					筛选
				</view>
				<!-- 3.搜索条件：毛发编号（mfid）、姓名（username）、电话(iphone)、身份证号(sfz)、管控乡镇（gsxz,按通迅录里搜索中的单位一样进行排序显示，除去余姚禁毒大队的选项） -->
				<tn-form :model="form" :labelWidth="150" ref="uForm" :errorType="['message']">
					<tn-form-item label="毛发编号" prop="mfid">
						<tn-input type="number" placeholder='输入毛发编号' :max-length="10" v-model="form.mfid" clearable />
					</tn-form-item>
					<tn-form-item label="姓名" prop="username">
						<tn-input placeholder='输入姓名' v-model="form.username" clearable />
					</tn-form-item>
					
					<tn-form-item label="电话" prop="iphone">
						<tn-input placeholder='输入联系电话' :max-length="11" v-model="form.iphone" clearable />
					</tn-form-item>

					<tn-form-item label="身份证号" prop="sfz">
						<tn-input placeholder='输入身份证号' :max-length="18" type="number" v-model="form.sfz" clearable />
					</tn-form-item>
					
					<tn-form-item label="管控乡镇" prop="gsxz">
						<tn-input v-model="form.gsxz" type="select" :selectOpen="cityShow" placeholder='选择社区街道'
							@click="cityShow = true" />
						<tn-select labelName="name" valueName="name" v-model="cityShow" :list="citylist"
							@confirm="cityconfirm" :searchShow="true"></tn-select>
					</tn-form-item>
					
					<tn-form-item v-if="xb" label="性别" prop="xb">
						<tn-radio-group v-model="form.xb">
							<tn-radio v-for="(item, index) in xblist" :key="index" :name="item.name">
								{{ item.name }}
							</tn-radio>
						</tn-radio-group>
					</tn-form-item>
					<!-- <tn-form-item label="人员状态" prop="statusname">
						<tn-input v-model="form.statusname" type="select" placeholder='选择人员状态' :selectOpen="statusShow" clearable
							@click="statusShow = true" />
						<tn-select labelName="name" valueName="id" v-model="statusShow" :list="statuslist"
							@confirm="statusconfirm"></tn-select>
					</tn-form-item> -->

					<!-- <tn-form-item label="分级分类" prop="fcfl">
						<tn-radio-group v-model="form.fcfl">
							<tn-radio v-for="(item, index) in levellist" :key="index" :name="item.details">
								{{ item.details }}
							</tn-radio>
						</tn-radio-group>
					</tn-form-item> -->

					<!-- <tn-form-item label="检测期数" prop="intro">
						<tn-input placeholder='输入检测期数' type="number" v-model="form.intro" clearable />
					</tn-form-item> -->


				


					<view class="tn-margin-top-lg">
						<view class="reset" @click="reset">重置</view>
						<tn-button backgroundColor="#2074d4" fontColor="#FFFFFF" width="70%"
							@click="submit">查询</tn-button>
					</view>
				</tn-form>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		name: "userselect",
		data() {
			return {
				show: false,
				form: {
					username: '',
					iphone: '',
					mfid: '',
					xb: [],
					sfz: '',
					status: '',
					statusname: '',
					gsxz: '',
					cityid: ''
				},
				statusShow: false,
				cityShow: false,
				citylist: [],
				statuslist: [{
					id: 1,
					name: '正常'
				}, {
					id: 2,
					name: '异常'
				}],
				xblist: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2,
					}
				]
			};
		},
		watch: {
			// 在select弹起的时候，重新初始化所有数据
			show: {
				handler(val) {
					// if (val) setTimeout(() => this.reset(), 10)
				},
				immediate: true
			}
		},
		components: {

		},
		props: {
			xb: {
				type: Boolean,
				default () {
					return false
				}
			},
		},

		created() {
			//获取村委关联列表
			this.getvillages();
		},
		mounted() {

		},
		beforeDestroy() {
			// this.reset();
		},
		methods: {
			close() {
				this.$emit('close')
			},
			select() {
				this.$emit('select', this.form)
			},
			statusconfirm(e) {
				this.form.statusname = e[0].label
				this.form.status = e[0].value
			},
			cityconfirm(e) {
				this.form.gsxz = e[0].label
				this.form.cityid = e[0].value
			},
			xbcheck(e) {
				this.form.xb = e
			},

			reset() {
				this.form = {
					name: '',
					iphone: '',
					mfid: '',
					xb: '',
					sfz: '',
					status: '',
					statusname: '',
					radio: '',
					gsxz: '',
					cityid: ''
				}
			},

			getvillages() {
				//获取村委关联列表
				this.$request({
					url: this.$api.common.streetlist,
					method: 'POST'
				}).then(response => {
					if (response.code === 0) {
						this.citylist = response.list;
					}
				});
			},
			submit() {
				this.show = false;
				this.$emit('select', this.form)
			},
		}
	}
</script>

<style scoped lang="scss">
	.reset {
		padding: 0 15px;
		font-size: 14px;
		height: 32px;
		width: 24%;
		margin-right: 20rpx;
		background-color: #ffffff;
		border: 1rpx solid #272727;
		margin-right: 10rpx;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		-webkit-transform: translate(0rpx, 0rpx);
		transform: translate(0rpx, 0rpx);
		border-radius: 12rpx;
	}
</style>